<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    所在省份<select name="" id="province"></select>
    所在城市<select name="" id="city"></select>
    所在区域<select name="" id="area"></select>
    <script src="citys.js"></script>
    <script src="jquery.min.js"></script>
    <script>
        let province = $("#province")
        let city = $("#city")
        let area = $("#area")

        citys.forEach(item=>{
            // 产生一个option，将数组中对应的省份名插入到select中
	        let option = $(`<option>${item.provinceName}</option>`);
	        province.append(option)
        })
        // 产生一个option，将数组中对应的城市份名插入到select中
        citys[0].mallCityList.forEach(item=>{
	        let option = $(`<option>${item.cityName}</option>`);
	        city.append(option)
        })
        // 产生一个option，将数组中对应的区名插入到select中
        citys[0].mallCityList[0].mallAreaList.forEach(item=>{
	        let option = $(`<option>${item.areaName}</option>`);
	        area.append(option)
        })

        province.change(function(){
	        updataCity.call(this);
	        updataArea.call(city[0]);
        })
        city.change(function(){
	        updataArea.call(this)
        })

        function updataCity(){
	        city.html("")
	        // 返回当前选中的选择项在其select标签中的下标
	        cityList = citys[this.selectedIndex].mallCityList;
	        cityList.forEach(item=>{
		        let option = $(`<option>${item.cityName}</option>`);
		        city.append(option)
	        })
        }
        function updataArea(){
	        area.html("")
	        let areaList = cityList[this.selectedIndex].mallAreaList;
	        areaList.forEach(item=>{
		        let option = $(`<option>${item.areaName}</option>`);
		        area.append(option)
	        })			
        }
    </script>
</body>
</html>